@import "../variables/default.scss";
@import "../mixins/index.scss";

.ym-row {
  @include display-flex();

  width: 100%;

  /* 弹性盒元素的方向 */
  &__direction {
    &--row {
      flex-direction: row;
    }

    &--column {
      flex-direction: column;
    }

    &--row-reverse {
      flex-direction: row-reverse;
    }

    &--column-reverse {
      flex-direction: column-reverse;
    }
  }

  /* 交叉轴对齐　*/
  &__align {
    &--start {
      align-items: flex-start;
    }

    &--end {
      align-items: flex-end;
    }

    &--center {
      align-items: center;
    }

    &--stretch {
      align-items: stretch;
    }

    &--baseline {
      align-items: baseline;
    }
  }
  /* 主轴对齐　*/
  &__justify {
    &--start {
      justify-content: flex-start;
    }

    &--end {
      justify-content: flex-end;
    }

    &--center {
      justify-content: center;
    }

    &--between {
      justify-content: space-between;
    }

    &--around {
      justify-content: space-around;
    }
  }

  &--no-wrap {
    flex-wrap: nowrap;
  }

  &--wrap {
    flex-wrap: wrap;
  }

  &--wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  &--center {
    @include display-flex();
    justify-content: center;
    align-items: center;
  }
}

.ym-col {
  @include flex(1);

  width: 100%;
  display: block;
  white-space: nowrap;
  box-sizing: border-box;

  @for $col from 1 through 12 {
    $width: ($col / 12) * 100%;

    &-#{$col} {
      @include flex(0, 0, $width);

      max-width: $width;
    }

    &__offset-#{$col} {
      margin-left: $width;
    }
  }

  &__align {
    &--top {
      align-self: flex-start;
    }

    &--bottom {
      align-self: flex-end;
    }

    &--center {
      align-self: center;
    }
  }

  /* 超出换行 */
  &--wrap {
    white-space: normal;
    word-wrap: break-word;
  }

  /* 内容自适应 */
  &--auto {
    max-width: initial;
    word-break: keep-all;
  }
}
